<template>
	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
		<el-row :gutter="20">

			<el-col :span="12">
				<el-form-item label="平台微信用户" prop="user_id">
					<el-select
						v-model="form.user_id"
						filterable
						remote
						:disabled="mode=='edit'"
						reserve-keyword
						placeholder="请输入用户名称"
						:remote-method="remoteMethod"
						:loading="loading">
						<el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.value">
<!--							<el-avatar :src="item.headimgurl" size="small" style="float: left;margin: 3px 10px 0 0;"></el-avatar> <span style="float: left;">{{item.nickname}}</span>-->
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="会员套餐" prop="vip_card_id">
					<el-select v-model="form.vip_card_id" placeholder="请选择">
						<el-option
							v-for="item in vipcardData"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="上级代理商（为空默认平台）" prop="agent_id">
					<el-select
						v-model="form.agent_id"
						filterable
						remote
						reserve-keyword
						placeholder="请输入代理商名称"
						:remote-method="agentSearch"
						:loading="loading">
						<el-option v-for="item in agentData" :key="item.id" :label="item.label" :value="item.value">
							<!--							<el-avatar :src="item.headimgurl" size="small" style="float: left;margin: 3px 10px 0 0;"></el-avatar> <span style="float: left;">{{item.nickname}}</span>-->
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="审核状态" prop="status">
					<el-select v-model="form.status" placeholder="请选择">
						<el-option
							v-for="item in statusData"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>


	</el-form>
</template>

<script>
export default {
	props: {
		mode: { type: String, default: "add" }
	},
	data() {
		return {
			//表单数据
			form: {
				id:"",
				user_id:'',
				vip_card_id: "",
				agent_id:"",
				status:'',
			},
			vipcardData:{},
			statusData:[
				{label:'未审核',value:0},
				{label:'审核通过',value:1},
				{label:'审核不通过',value:2},

			],

			//验证规则
			rules: {
				user_id:[
					{required: true, message: '请选择一个用户'}
				],
				vip_card_id: [
					{required: true, message: '请选择会员套餐'}
				],
				status: [
					{required: true, message: '请选择审核状态'}
				]
			},
            userList:[],
			agentData:[]
		}
	},
	mounted() {

		this.getVipCard()
	},
	methods: {
		getVipCard(){
			this.$API.user.getVipCardList.get().then((res)=>{
				console.log(res)
				this.vipcardData = res.data
			})
		},
		async remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				let k = {k:query}
				var data = await this.$API.user.seach.get(k)

				setTimeout(() => {
					this.loading = false;
					this.userList = data.data
					// console.log(this.userList)
				}, 200);
			} else {
				this.userList = [];
			}
		},
		async agentSearch(query){
			if (query !== '') {
				this.loading = true;
				let k = {k:query}
				var data = await this.$API.vip.selectAgent.get(k)

				setTimeout(() => {
					console.log(data.data)
					this.loading = false;
					this.agentData = data.data
				}, 200);
			} else {
				this.agentData = [];
			}
		},
		//表单提交方法
		submit(callback){
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {

					callback(this.form)

					// console.log(this.form)
				}else{
					return false;
				}
			})
		},
		//表单注入数据
		setData(data){
			console.log(data)
			this.form.id = data.id
			this.form.user_id = data.user.nickname
			this.form.status = data.status
			this.form.vip_card_id = data.vip_card_id
			this.form.agent_id = data.agent_id==0?'':data.agent_id


			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			//Object.assign(this.form, data)
		}
	}
}
</script>

<style>
</style>
